<template>
  <div class="gridContainer detialPage">
    <div class="car-pc-title cf">
      <span class="f-l">
        <b><i class="llse llse-huoche"></i></b>
        {{$route.query.TPLPoNo}}
      </span>
      <em class="org f-r ft12">待接单</em>
    </div>

    <scroller lock-x scrollbar-y use-pullup :height="'-67'" v-if="totalRecords > 0" :pullup-config="ScrollerConfig" ref="Scroller">
      <div>
        <div class="acpt-list">

          <div class="acpt-list-wrap mb30" v-for="(item, index) in todolist">
            <div class="acpt-list-head cf">
              <span class="txt f-l">业务单号：{{item.BbMain.BBillNo}}</span>
            </div>
            <div class="displayflex acpt-list-body lineb">
              <span class="cargo">
                <i class="iconfont icon-cargo"></i>
                <p>{{item.BbMain.Pkgs}}个</p>
              </span>
              <div class="txt flex1">
                <p class="ft17">{{item.PoMain.PickContacts}} {{item.PoMain.PickContactsTel}}</p>
                <p>起运地：{{item.PoMain.DepartureVenue | removeSplash}}{{item.PoMain.DepartureAddress}}</p>
                <p>目的地：{{item.PoMain.ArrivalVenue | removeSplash}}{{item.PoMain.ArrivalAddress}}</p>
              </div>
            </div>
            <div class="btn-grp txt-rit">
              <div class="carbtn ml10" @click="GoToDetail(item.BbMain.Guid)">详情</div>
            </div>
          </div>

        </div>

      </div>
    </scroller>

  </div>
</template>

<style>
.bline {
  border-bottom: 1px solid #ddd;
}
.tline {
  border-top: 1px solid #ddd;
}
</style>

<script>
export default {
  data() {
    return {
      todolist: [
        {
          PoMain:{},
        }
      ],
      waitAcc: false,
      totalRecords:0,
      ScrollerConfig: {
        content: "",
        downContent: "",
        height: 0,
        loadingContent: "",
        upContent: ""
      }
    }
  },
  computed: {
    userinfo(){
      return localStorage.userinfo?JSON.parse(localStorage.userinfo):null
    },
  },
  created(){
    this.getData();
  },
  
  methods: {
    getData() {
      let query = {
        CombinMainPoGuid: this.$route.query.Guid,
      };
      this.Ajax.post('GetMultipleOrderDetail', query).then((res) => {
        if (res.IsSuccess) {
          this.todolist = res.Datas;
          this.totalRecords = res.TotalRecords;
        } else {
          this.Toast({
              message: '出现错误，请刷新重试' || res.ErrorMessage,
          });
        }
      }).catch(e => {
        console.log(e);
        this.Toast({
            message: '出现错误，请刷新重试',
        });
      });
    },
    GoToDetail(BBillGuid) {
      this.$router.push({
        path: "carrdetail",
        query: {
          Guid: BBillGuid
        }
      });
    },
  }
};
</script>
